<template>
    <Modal v-model="setModalStatus" class="pages-home-homeIndex-resetPwdModal" :mask-closable="false"
           @on-cancel="cancelModalBtn" class-name="vertical-center-modal">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>修改密码</span>
        </p>
        <div>
            <Form :model="formValidate"  label-position="left" :label-width="120">

                <Form-item label="旧密码：" style="margin-bottom: 0">
                    <Row>
                        <Col span="18">
                        <Input v-model="formValidate.oldPwd" placeholder="旧密码">
                        </Input>
                        </Col>
                        <Col span="6">
                        <span @click="forgetPWD" style="font-size: 12px;margin-left: 15px;cursor: pointer;">忘记密码</span>
                        </Col>
                    </Row>
                </Form-item>

                <Form-item label="输入新密码：" style="margin-bottom: 0">
                    <Row>
                        <Col span="18">
                        <Input type="password" v-model="formValidate.NewPWD1" placeholder="输入新密码">
                        </Input>
                        </Col>
                    </Row>
                </Form-item>

                <Form-item label="再输入一次：" style="margin-bottom: 0">
                    <Row>
                        <Col span="18">
                        <Input type="password" v-model="formValidate.NewPWD2" placeholder="再输入一次">
                        </Input>
                        </Col>
                    </Row>
                </Form-item>

            </Form>
            <span v-show="invalidPWD()" style="color: #ff0002;margin-left: 125px">*两次输入的密码不一致，请重新输入</span>
        </div>
        <div slot="footer">
            <button class="btn btn-primary" :disabled="!validNewPWD()" @click="updatePWD">确认提交</button>
        </div>
    </Modal>
</template>

<script type="text/ecmascript-6">

    import getData from '../../../api/getData'

    export default {
        props: ['modal-status'],
        data: function () {
            return {
//                setModalStatus: false,
                formValidate: {
                    oldPwd: '',
                    NewPWD1: '',
                    NewPWD2: ''
                }
            }
        },
        computed: {
            setModalStatus(){
                this.formValidate = {
                    oldPwd: '',
                    NewPWD1: '',
                    NewPWD2: ''
                };
                return this.modalStatus;
            }
        },
        methods: {

            cancelModalBtn: function ( ) {
                this.$emit("close-modal");
            },

            invalidPWD: function(){
                return  this.formValidate.NewPWD1 && this.formValidate.NewPWD2 &&
                    this.formValidate.NewPWD1 != this.formValidate.NewPWD2;
            },

            validNewPWD: function(){
                return  this.formValidate.NewPWD1 && this.formValidate.NewPWD2 &&
                    this.formValidate.NewPWD1 == this.formValidate.NewPWD2;
            },

            //通过原始密码修改密码
            updatePWD: function(){
                var self = this;
                getData.post("updatePWD", {
                    oldPwd: self.formValidate.oldPwd,
                    NewPWD: self.formValidate.NewPWD1
                }).then(function (response) {
                    if( response.data.code == 0 ){
                        self.cancelModalBtn();
                    }else{
                        self.$Message.info( response.data.msg ? response.data.msg : '修改密码失败，请重试' );
                    }
                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },

            //忘记密码
            forgetPWD: function(){
                this.cancelModalBtn();
                this.$emit('forget-password');
            }
        },
        components: {}
    }
</script>

<style scoped lang="scss">
    .pages-home-homeIndex-resetPwdModal {
    }
</style>
